<template>
  <div class="wrapper example3-container">
    <!-- 返回区域 -->
    <div
      class="back-box"
      @click="$router.go(-1)"
    >返回</div>

    <!-- 标题区域 -->
    <h1 class="title-box">3、reactive函数</h1>

    <!-- 实例区域 -->
    <div class="example3-box">
      <h1>一个人的信息</h1>
      <h2>姓名：{{ name }}</h2>
      <h2>年龄：{{ age }}</h2>
      <h2>工作类型：{{ job.type }}</h2>
      <h2>工作薪水：{{ job.salary }}</h2>
      <h2>测试的数据c：{{ job.a.b.c }}</h2>
      <h2>爱好：{{ hobby }}</h2>
      <button @click="changeInfo">修改人的信息</button>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  name: 'Example3',
  setup() {
    // 数据
    const name = ref('张三');
    const age = ref(20);
    const job = reactive({
      type: '前端工程师',
      salary: '30K',
      a: {
        b: {
          c: 666
        }
      }
    });
    const hobby = reactive(['爬山', '听歌', '打游戏']);

    // 方法
    const changeInfo = () => {
      // 基本数据类型
      name.value = '李四';
      age.value = 35;

      // 复杂数据类型
      job.type = '后端工程师';
      job.salary = '40K';
      job.a.b.c = 999;
      hobby[0] = '游泳';
    };

    return {
      name,
      age,
      job,
      hobby,
      changeInfo
    };
  }
};
</script>

<style lang="scss" scoped>
.example3-container {
  // 返回区域
  & > .back-box {
    width: 50px;
    height: 23px;
    line-height: 20px;
    text-align: center;
    background-color: #efefef;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid #767676;
    border-radius: 4px;
    cursor: pointer;
  }

  // 标题区域
  & > .title-box {
    margin-bottom: 30px;
  }

  // 实例区域
  & > .example3-box {
    & > h1 {
      margin-bottom: 20px;
    }
    & > h2 {
      margin-bottom: 20px;
    }
    & > button {
      cursor: pointer;
    }
  }
}
</style>
